<script>
import outMain from "@/components/outMain.vue";
import defUpImg from "@/components/public/defUpImg.vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { Shareset, SharesetShow } from "@/http/api";

export default {
  components: { outMain, defUpImg },
  name: "",
  data() {
    return {
      formData: {
        tgcgjf: "",
        tgsm: "",
        tghb: "",
      },
      showCont: false,
      rules: {
        tgcgjf: [
          {
            required: true,
            message: "请输入每推广成功1人获得多少积分",
            trigger: "blur",
            min: 1,
            max: 10,
          },
        ],
        tgsm: [
          {
            required: true,
            message: "请输入推广活动说明",
            trigger: "blur",
            min: 5,
            max: 3000,
          },
        ],
        tghb: [
          {
            required: true,
            message: "请上传推广海报图",
            trigger: "blur",
          },
        ],
      },
    };
  },
  props: {},
  setup() {},
  methods: {
    async saveFn() {
      const valid = await this.$refs.ruleForm.validate();
      if (!valid) {
        return;
      }
      let data = this.formData;
      Shareset(data).then((res) => {
        if (res.data.code == 1) {
          ElMessage({
            type: "success",
            message: "保存成功",
          });
        }
      });
    },
    getImg(url) {
      this.formData.tghb = url;
    },
    getData() {
      SharesetShow().then((res) => {
        if (res.data.code == 1) {
          this.formData = res.data.data;
          this.showCont = true;
        }
      });
    },
  },
  created() {
    this.getData();
  },
};
</script>
<template>
  <outMain>
    <div class="formCont">
      <div class="formStep">
        <div class="formHead">
          <div>分销推广设置</div>
        </div>
        <div class="formMain">
          <el-form :rules="rules" ref="ruleForm" :model="formData">
            <div class="flexCont">
              <el-form-item
                label="推广成功积分"
                label-width="120"
                prop="tgcgjf"
              >
                <el-input
                  placeholder="请输入推广成功积分"
                  v-model="formData.tgcgjf"
                  maxlength="20"
                >
                  <template #append>积分/人</template>
                </el-input>
              </el-form-item>
              <el-form-item
                class="flexPull"
                label="推广说明"
                label-width="120"
                prop="tgsm"
              >
                <el-input
                  v-model="formData.tgsm"
                  maxlength="3000"
                  placeholder="请输入推广说明"
                  show-word-limit
                  :rows="4"
                  type="textarea"
                />
              </el-form-item>
              <el-form-item
                class="flexPull"
                label="推广海报"
                v-if="showCont"
                label-width="120"
                prop="tghb"
              >
                <defUpImg :propImg="formData.tghb" @ok="getImg"></defUpImg>
              </el-form-item>
              <el-form-item class="flexPull" label=" " label-width="120">
                <btn value="保存设置" @ok="saveFn"></btn>
              </el-form-item>
            </div>
          </el-form>
        </div>
      </div>
    </div>
  </outMain>
</template>
<style scoped lang="less"></style>
